<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div class="contentBattery">
      <div class="contentBatterydiv">
        Total Recharge Amount:<span class="contentBatteryspan">{{
          "$" + params.topUpMoney || "$0.00"
        }}</span>
      </div>
      <div class="contentBatterydiv">
        Total Gift Amount：<span class="contentBatteryspan">{{
          "$" + params.outMoney || "$0.00"
        }}</span>
      </div>
    </div>
    <r-table
      class="mt20"
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      searchData: {
        orderNo: "",
        phone: "",
        status: "",
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Order Nnumber",
          prop: "orderNo",
          width: 250
        },
        { type: "input", placeholder: "User Phone", prop: "phone", width: 230 },
        {
          type: "date",
          placeholder: "Start Date",
          prop: "beginTime",
          width: 220,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Date",
          prop: "endTime",
          width: 220,
          change: val => {
            this.searchData.endTime = val;
          }
        },
        {
          type: "select",
          placeholder: "Order Status",
          prop: "status",
          width: 230,
          options: [
            { label: "Recharge Failure", value: 1 },
            { label: "Recharge Success", value: 2 }
          ]
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              orderNo: "",
              phone: "",
              status: "",
              beginTime: "",
              endTime: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "Order Nnumber", prop: "orderNo" },
        { label: "User Name", prop: "userName" },
        { label: "User Phone", prop: "phone" },
        { label: "Recharge Amount", prop: "topupMoney" },
        // { label: "Total ConsumptionMoney", prop: "topUpMoney",  },
        { label: "Gift Amount", prop: "outMoney" },
        {
          label: "Order Status",
          prop: "status",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              (row.status == 0
                ? "Underway"
                : row.status == 1
                ? "Completed"
                : row.status == 2
                ? "Overdue"
                : row.status == 3
                ? "Have Refund "
                : "--") +
              "</p>";
            return html;
          }
        },
        { label: "Payment Time", prop: "topupTime" },
        { label: "Submission Time", prop: "ctime" }
      ],
      tableHandles: [
        // {
        //   label: "Export",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
      ],
      pagination: { limit: 10, offset: 1, total: 0 },

      checkBox: [],

      params: {
        topUpMoney: "",
        outMoney: ""
      }
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    userDetailsCall() {
      this.userDetailsData.show = false;
    },
    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.topupRecord_list({
        orderNo: this.searchData.orderNo,
        phone: this.searchData.phone,
        status: this.searchData.status,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });

      var list = res.rows || [];
      this.tableData = list;
      this.pagination.total = res.total;

      this.params = res.params || {
        topUpMoney: "0.00",
        outMoney: "0.00"
      };
      console.log(res);
      console.log(res.params, this.params, 11111);
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  width: 800px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  left: 0px;
  top: 0;
}

.contentBatterydiv {
  width: 290px;
}

.contentBatterydiv:nth-child(1) {
  margin-right: 50px;
}

.contentBatteryspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
